<template>
	<view class="container">
	

		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="请输入关键搜索" :show-action="false" :clearabled="false" :animation="false"
					shape="round" bgColor="#FFFFFF" height="72rpx" searchIconColor="#999999" placeholderColor="#999999"
					:inputStyle="{
						color: '#333333',
						backgroundColor: '#FFFFFF',
					}"></u-search>
			</view>

			<!-- 筛选区域 -->
			<view class="filter-tabs">
				<view class="cordbox">
					<view class="cordbox_Z">
						选择楼栋
						<u-icon name="arrow-down-fill" color="#000" size="18"></u-icon>

					</view>
					<view class="cordbox_y">
						选择年月
						<u-icon name="arrow-down-fill" color="#000" size="18/*"></u-icon>
					</view>
				</view>
			<!-- 	<view class="tab-list">
					<view class="tab-item" v-for="(item, index) in filterTabs" :key="index"
						@click="handleTabClick(index)">
						<text :class="['tab-text', currentTab === index ? 'active' : '']">{{ item.name }}</text>
						<u-icon :name="currentTab === index ? 'arrow-up' : 'arrow-down'" size="12"
							:color="currentTab === index ? '#FE4F04' : '#666'"></u-icon>
					</view> -->
				</view>
				<!-- 下拉内容 -->
				<view class="dropdown-content" v-if="showDropdown">
					<view class="mask" @click="closeDropdown"></view>
					<view class="content">
						<view class="option-list">
							<view class="option-item" v-for="(option, idx) in filterTabs[currentTab].options" :key="idx"
								@click="selectOption(option)">
								<text
									:class="['option-text', filterTabs[currentTab].value === option.value ? 'active' : '']">
									{{ option.label }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 商铺列表 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="toShopDetail(item)">
					<!-- 左侧图片区域 -->
					<view class="shop-img-wrap">
						<!-- <view class="shop-tag">商铺</view> -->
						<image :src="item.image" mode="aspectFill" class="shop-img"></image>
					</view>
					<!-- 右侧信息区域 -->
					<view class="shop-info">
						<text class="shop-title">{{ item.title }}</text>
				<!-- 		<view class="">
							<text class="shop-title">{{ '预约日期：' }}</text> 
							<span style="color: #ccc;">2024.02.03</span>
						</view>
						<view class="">
							<text class="shop-title">{{ '预约手机号：' }}</text> 
							<span style="color: #ccc;">11111111111</span>
						</view> -->
						<view class="shop-attrs">
							<text>{{ item.floor }}</text>
							<text>{{ item.area }}m²</text>
							<text>{{ item.type }}</text>
						</view>
						<view class="shop-tags">
							<text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag">{{ tag }}</text>
						</view>
						<view class="" style="display: flex; justify-content: space-between; align-items: center;">
							<view class="shop-price">
								<text class="price">¥{{ item.price }}</text>
								<text class="unit">/月</text> 
							</view>
							<view class="shopprice">
								房屋委托
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDropdown: false,
				currentTab: 0,
				filterTabs: [{
						name: "综合排序",
						value: "",
						options: [{
								label: "默认排序",
								value: "default"
							},
							{
								label: "价格从低到高",
								value: "price_asc"
							},
							{
								label: "价格从高到低",
								value: "price_desc"
							},
							{
								label: "面积从大到小",
								value: "area_desc"
							},
							{
								label: "面积从小到大",
								value: "area_asc"
							},
						],
					},
					{
						name: "区域",
						value: "",
						options: [{
								label: "全部",
								value: "all"
							},
							{
								label: "萧岗",
								value: "xiaogang"
							},
							{
								label: "城中村",
								value: "village"
							},
						],
					},
					{
						name: "租金",
						value: "",
						options: [{
								label: "全部",
								value: "all"
							},
							{
								label: "1000以下",
								value: "0-1000"
							},
							{
								label: "1000-2000",
								value: "1000-2000"
							},
							{
								label: "2000-3000",
								value: "2000-3000"
							},
							{
								label: "3000以上",
								value: "3000-999999"
							},
						],
					},
					{
						name: "面积",
						value: "",
						options: [{
								label: "全部",
								value: "all"
							},
							{
								label: "50㎡以下",
								value: "0-50"
							},
							{
								label: "50-100㎡",
								value: "50-100"
							},
							{
								label: "100-200㎡",
								value: "100-200"
							},
							{
								label: "200㎡以上",
								value: "200-999999"
							},
						],
					},
				],
				shopList: [{
						image: this.$Config.HTTP_REQUEST_URL+"/img/module_img1.png",
						title: "萧岗商业街店铺出租",
						floor: "2楼",
						area: "88",
						type: "商铺",
						price: "3500",
						tags: ["临街商铺", "可明火", "可餐饮"],
					},
					{
						image: this.$Config.HTTP_REQUEST_URL+"/img/module_img1.png",
						title: "萧岗商业街店铺出租",
						floor: "3楼",
						area: "88",
						type: "商铺",
						price: "3500",
						tags: ["临街商铺", "可明火", "可餐饮"],
					},
				],
			};
		},
		methods: {
			handleTabClick(index) {
				if (this.currentTab === index) {
					this.showDropdown = !this.showDropdown;
				} else {
					this.currentTab = index;
					this.showDropdown = true;
				}
			},
			selectOption(option) {
				this.filterTabs[this.currentTab].value = option.value;
				this.showDropdown = false;
				// 处理筛选逻辑
			},
			closeDropdown() {
				this.showDropdown = false;
			},
			toShopDetail(item) {
				uni.navigateTo({
					url: `/pages/shop-detail/shop-detail?id=${item.id}`,
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f6fa;
	}
	.shopprice{
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		color: #fe5b16;
		font-size: 25rpx;
		border: 1rpx solid #fe5b16;
	}
	.cordbox{
		display: flex;
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		.cordbox_Z{
			background-color: #fff;
			width: 48%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding:  0 20rpx;
		}
		.cordbox_y{
			background-color: #fff;
			width: 48%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding:  0 20rpx;
		}
	}
	.search-box {
		padding: 24rpx 32rpx;

		:deep(.u-search) {
			background-color: #ffffff !important;
			border-radius: 36rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

			.u-search__content {
				background-color: #ffffff !important;
				height: 72rpx;
				padding: 0 30rpx;

				.u-search__content__icon {
					margin-right: 8rpx;
				}

				.u-search__content__input {
					font-size: 28rpx;
				}
			}
		}
	}

	.filter-tabs {
		position: relative;
		background: #f5f6fa;

		.tab-list {
			display: flex;
			justify-content: space-around;
			padding: 24rpx 0;

			.tab-item {
				display: flex;
				align-items: center;
				position: relative;

				.tab-text {
					font-family: PingFangSC, PingFang SC;
					font-size: 26rpx;
					color: #666666;
					margin-right: 6rpx;

					&.active {
						color: #2979ff;
						font-weight: 500;
					}
				}

				// 添加第一个选项的特殊样式（综合排序）
				&:first-child {
					.tab-text {
						color: #2979ff;
					}
				}
			}
		}

		.dropdown-content {
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;
			z-index: 100;

			.mask {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.4);
				z-index: 98;
			}

			.content {
				position: relative;
				background-color: #fff;
				z-index: 99;
				border-radius: 0 0 16rpx 16rpx;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

				.option-list {
					padding: 20rpx 0;

					.option-item {
						padding: 20rpx 32rpx;

						.option-text {
							font-size: 26rpx;
							color: #666666;

							&.active {
								color: #2979ff;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}

	.shop-list {
		padding: 24rpx;

		.shop-item {
			display: flex;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 24rpx;

			.shop-img-wrap {
				position: relative;
				width: 220rpx;
				height: 180rpx;
				margin-right: 24rpx;
				flex-shrink: 0;

				.shop-tag {
					position: absolute;
					left: 0;
					top: 0;
					background: #3b7cff;
					color: #fff;
					font-size: 24rpx;
					padding: 4rpx 16rpx;
					border-radius: 8rpx 0 8rpx 0;
					z-index: 1;
				}

				.shop-img {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.shop-info {
				flex: 1;
				display: flex;
				// flex-wrap: wrap;
				flex-direction: column;
				// align-items: center;
				
				// justify-content: space-between;
				min-width: 0; // 防止文字溢出

				.shop-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
					line-height: 40rpx;
					margin-bottom: 12rpx;
					// 文字超出显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.shop-attrs {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 12rpx;

					text {
						position: relative;
						margin-right: 24rpx;

						&:not(:last-child)::after {
							content: "";
							position: absolute;
							right: -12rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 1px;
							height: 20rpx;
							background: #eeeeee;
						}
					}
				}

				.shop-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 8rpx;
					margin-bottom: 12rpx;

					.tag {
						font-size: 20rpx;
						color: #ff5a5f;
						background: rgba(255, 90, 95, 0.1);
						padding: 2rpx 8rpx;
						border-radius: 4rpx;
					}
				}

				.shop-price {
					color: #ff5a5f;
					display: flex;
					align-items: baseline;

					.price {
						font-size: 32rpx;
						font-weight: 600;
					}

					.unit {
						font-size: 22rpx;
						margin-left: 4rpx;
					}
				}
			}
		}
	}
</style>